<template>
	<view class="pages">
		<cu-custom bgColor="bg-white" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
			
		</cu-custom>
		<scroll-view scroll-y="true" class="item-box" :style="[{height:scrollH+'px'}]">

			<!--选择地址样式一-->
			<view class="water-box-address middle " >
				<view class="head-item-box " @click="selectAddr">
					<view class="iconbox  middle">
						<image class="icon-img" :src="domain+'/static/img/location.png'" mode="widthFix">
						</image>
					</view>
					<view class="head-item-body " v-if="shopInfo.area.area_name && address.address+address.detail">
						<text
							class="text-brown text-xl c-text1">{{shopInfo.area.area_name+'-'+address.address+address.detail || ''}}
						</text>
						<view class="consignee1"><text class="c-text"> {{address.consignee || ''}}</text> <text
								class="mobile c-text margin-left ">{{address.mobile || ''}} </text></view>

					</view>
					<view class="head-item-body " v-else>
						<text class="text-brown text-xl c-text1">请选择联系地址</text>
					</view>
					<view class="right-icon  middle">
						<text class="cuIcon-right" style="font-size: 32upx;"></text>
					</view>
				</view>
			</view>
			<view class="item_bg bg-white">
				<view class="item-box1">
						<textarea class="desc-box" :focus="false" placeholder="准确添加故障信息可更快解决问题..." v-model="formData.desc"
							maxlength="200" />
					<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage" limit=9
						:server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl" :fileKeyName="file">
					</robby-image-upload>

				</view>

			</view>

		</scroll-view>
		<view class="pay-btn middle" @click="sumbitOrder"><text>提交申请</text></view>
		<uni-popup ref="address" type="center" :closeBtn="true">
			<view style="width: 640rpx; background: #F6F6F6; border-radius: 20rpx; padding-bottom: 20rpx;">
		
				<radio-group @change="checkAddress" style="width: 640rpx;height: 100%;position: relative;">
					<scroll-view class="addr-address-list" scroll-y="true"
						style="width: 94%; height: 600rpx;margin-left: 3%;">
						<view v-for="(item,index) in addressList" :key="index" class="addr-address-box ">
							<view class="addr-address-item1 ">
								<view class="text-bold" style="font-size: 28upx;">
									<text class="address ">{{item.address+item.detail}}</text>
									<text class="is_default" v-if="item.is_default==1">（默认）</text>
		
								</view>
								<view class="dizhi-info" style="color: #999999;">
									<text class="consignee">{{item.consignee}}</text>
									<text class="mobile ">{{item.mobile}}</text>
								</view>
							</view>
							<view class="addr-address-item2 middle">
								<label class="radio">
									<radio :value="item.address_id"
										:checked="item.address_id == postData.address_id" color="#1270E0"
										style="transform:scale(0.8)" />
								</label>
							</view>
						</view>
					</scroll-view>
				</radio-group>
				<view class="os-add-addr-btn" @click="addAddress">
					<text>+ 新增地址</text>
				</view>
			</view>
		</uni-popup>
		
	<!-- 	<uni-popup ref="address" type="center" :closeBtn="true">
			<view style="width: 640rpx; background: #F6F6F6; border-radius: 20rpx; padding-bottom: 20rpx;">
				<radio-group @change="checkAddress" style="width: 640rpx;height: 100%;position: relative;">
					<scroll-view class="addr-address-list" scroll-y="true"
						style="width: 94%; height: 600rpx;margin-left: 3%;">
						<view v-for="(item,index) in addressList" :key="index" class="addr-address-box ">
							<view class="addr-address-item1 ">
								<view class="text-bold" style="font-size: 28upx;">
									<text class="address">{{item.address+item.detail}}</text>
									<text class="is_default" v-if="item.is_default==1">（默认）</text>

								</view>
								<view style="color: #FF999999;">
									<text class="consignee">{{item.consignee}}</text>
									<text class="mobile margin-left">{{item.mobile}}</text>
								</view>
							</view>
							<view class="addr-address-item2 middle">
								<label class="radio">
									<radio :value="item.address_id" :checked="item.address_id == formData.address_id"
										color="#1270E0" style="transform:scale(0.8)" />
								</label>
							</view>
						</view>
					</scroll-view>
				</radio-group>
				<view class="os-add-addr-btn" @click="addAddress">
					<text>+ 新增地址</text>
				</view>
			</view>
		</uni-popup>
	
	 -->
	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	export default {
		components: {
			robbyImageUpload,
			uniPopup

		},
		name: "User",
		data() {
			return {
				title: "",
				imageData: [],
				StatusBar: this.Custom,
				swiperHeight: 0,
				domain: this.resDomain,
				scrollH: this.WH - this.CustomBar - 50,
				formData: {
					desc: "",
					desc_img: {},
					server_type_id: "",
					address_id: "",
					consignee: "",
					mobile: "",
					reserve_time: "",
					is_reserve: 0,
				},
				serverUrl: this.apiHost + '/comm/imageUp',
				serverUrlDeleteImage: this.apiHost + '/comm/delupload',
				file: '',
				dateArr: ['今日', '明天', '后天'],
				day: 0,
				dormIndex: 0,
				addressList: {},
				address: {
					'addres_id': 0
				},
				shopInfo: {},
			}
		},
		onLoad(option) {
			(option) ? (() => {
				let item = JSON.parse(option.item);
				this.title = item.name;
				this.formData.server_type_id = item.server_type_id;
			})() : "";

			this.apiRequest('/buyer/shopInfo', {
				shop_id: 1,
			}).then(res => {
				if (res.code == 200) {
					this.shopInfo = res.data;
				}
			})

			this.updateAdree();

		},
		mounted() {
			this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);


		},
		methods: {
			upData1() {
				this.updateAdree();
			},
			upData() {
				location.reload();
			},
			/**
			 * 选择上门地址
			 */
			selectAddr() {
				this.$refs.address.open()
			},
			checkAddress(e) {
				for (var key in this.addressList) {
					if (e.detail.value == this.addressList[key].address_id) {
						this.address = this.addressList[key];
						this.formData.address_id = e.detail.value
					}
				}
				console.log("address " + JSON.stringify(this.address))
				this.$refs.address.close()

			},
			addAddress() { //新增地址
				uni.navigateTo({
					url: '/pages/user/addAdress?shop_id=' + this.shop_id
				});
			},

			deleteImage: function(e) {
				console.log(e)
			},
			addImage: function(e) {
				console.log(e)
				this.formData.desc_img = e.allImages
			},
			selectDorm(e) {
				if (e.detail.value > 0) {
					this.formData.is_reserve = 1
				}
				this.day = e.detail.value
			},
			checkDate(e) {
				if (e.detail.value > 0) {
					this.formData.is_reserve = 1
				}
				this.day = e.detail.value
			},
			appointment(e) {
				this.formData.reserve_time = e.detail.value
				this.formData.is_reserve = 1
			},
			/**
			 * 更新地址
			 */
			updateAdree() {
				this.apiRequest('/buyer/addressList', {
					area_id: uni.getStorageSync('area_id'),
				}).then(res => {
					this.addressList = res.data
					if (this.addressList.length > 0) {
						for (var key in this.addressList) {
							if (this.addressList[key].is_default == 1) {
								this.address = this.addressList[key]
							}
						}

						if (this.address.addres_id == 0) { //没有默认地址，就选最新的地址
							this.address = this.addressList[0]
						}

						this.formData.address_id = this.address.address_id
						this.formData.consignee = this.address.consignee
						this.formData.mobile = this.address.mobile
					}
				})
			},
			/**
			 * 提交订单
			 */
			sumbitOrder() {
				let tips = (...dat) => {
					uni.showToast({
						title: dat[0],
						icon: 'none'
					})
					return;
				}
				//验证
				if (this.formData.desc.length == 0) {
					tips("请输入描述");

				} else if (this.formData.address_id == "") {
					tips("请选择地址");
				} else if (this.formData.desc_img.length == 0) {
					tips("请选择图片");

				} else {
					this.apiRequest('/buyer/addServerOrder', this.formData, 1, 'POST').then(res => {
						if (res.code == 200) {
							uni.redirectTo({
								url: './record',
							})
						}
					})

				}
			}


		}




	}
</script>

<style scoped>
	.pages {

		background: #FFFFFF;
	}

	.item-box {
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.item-box1 {
		
		width: 92%;
		margin-left: 4%;

	}

	.item_bg {
		width: 100%;
		margin-top: 20upx;
		
	}

	.item-box-box {
		width: 92vw;
		background: #F7F7F7;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-wrap: wrap;
	}

	.item-box-box-head {
		width: 100%;
		height: 60upx;
		margin-top: 20upx;
		line-height: 60upx;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		padding-left: 2%;
	}

	.guarant-type {
		width: 18vw;
		height: 24vw;
		display: flex;
		flex-direction: column;
		margin: 1vw 2.4vw;
	}

	.guarant-type image {
		width: 18vw;
		height: 18vw;
	}

	.guarant-type text {
		width: 18vw;
		height: 5vw;
		text-align: center;
		line-height: 5vw;
	}

	.pay-btn {

		width: 92vw;
		background: #1270e0;
		text-align: center;
		border-radius: 10rpx;
		padding: 10rpx 0;
		color: #FFFFFF;
		height: 100upx;
		font-size: 35upx;
		position: fixed;
		bottom: 1vh;

		margin-left: 4vw;


	}

	.desc-box {
		width: 100%;
		height: 312upx;
		background: #F7F7F7;
		border-radius: 20upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		padding: 30upx 30upx 30upx 30upx;
		position: relative;
	}

	.card {
		margin-top: 40upx;
		width: 92%;
		margin-left: 4%;
		min-height: 150upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
	}

	.card-item {
		width: 100%;
		height: 114upx;
		display: flex;
		flex-direction: row;

	}

	.card-icon {
		width: 15%;
		height: 100%;

	}

	.card-title {
		width: 85%;
		height: 100%;
		font-size: 28upx;
		font-weight: 500;
		color: #333333;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-right {
		width: 5%;
		position: absolute;
		float: right;
		right: 1%;
	}

	.card-input {
		width: 100%;
		height: 100%;


	}

	.card-right {
		color: #999999;
	}

	.bord-box {
		width: 90%;
		height: 4upx;
		background-color: #F7F7F7;
	}

	.card-picker {
		width: 100%;
		height: 100%;
		display: flex;
		align-content: center;
	}

	.card-title-p {

		height: 100%;
		display: flex;
		align-items: center;
		width: 80vw;
	}

	.water-box {
		margin-top: 40upx;
		width: 94%;
		margin-left: 3%;
		display: flex;
		flex-direction: column;
	}

	.water-box-address {
		width: 92%;
		margin-left: 4%;
		height: 150upx;
		background: #F7F7F7;
		
		border-radius: 20upx;
		flex-direction: column;


	}

	.iconlocation {
		color: #FF1270E0;
	}

	.select-postion-t {
		text-align: left;
	}

	.cu-form-group {
		height: 50%;
		border: none;
		border-radius: 20upx;
		position: relative;
	}

	.water-box-title1 {

		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		display: flex;
		align-items: center;
		height: 100upx;
		position: relative;

	}

	.picer-right-box {
		position: absolute;
		float: right;
		right: 0;
		height: 100upx;
	}

	.unit-box {
		max-width: 55%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.water-num-box {
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.cankao-box {
		width: 100%;
		margin-top: 30upx;
		height: 240upx;
		background: #EBEBEB;
		border-radius: 20upx;
	}

	.cankao-box image {
		width: 100%;
		height: 100%;
	}

	.water-item-right {
		max-width: 70%;
		position: absolute;
		float: right;
		right: 3%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.water-item-right1 {

		position: absolute;
		float: right;
		right: 0%;
	}

	.youhuiquan {
		color: white;
		background-color: #FFDF3636;
	}

	.water-bottom-box {
		width: 100%;
		font-size: 22upx;
		font-weight: 500;
		color: #999999;
	}

	.water-box-bottom {
		width: 94%;
		margin-left: 3%;
		margin-top: 5%;

	}


	/**
	 * 新追加的代码
	 */
	.head-item-box {
		width: 98%;
		height: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		background: #F7F7F7;
	}

	.iconbox {
		width: 10%;
		height: 100%;

	}

	.iconbox text {
		display: flex;
		align-items: center;
	}

	.head-item-body {
		width: 82%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.head-item-body1 {
		width: 100%;
		height: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;

	}

	.c-text1 {

		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 40upx;
		font-weight: 800;
		color: #333333;
		display: block;
	}

	.right-icon {
		position: absolute;
		right: 1%;
		float: right;

		text-align: center;
	}

	.consignee {
		display: flex;
		flex-direction: row;
		max-width: 50%;

		align-items: center;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
	}

	.consignee1 {
		display: flex;
		flex-direction: row;
		width: 100%;
        margin-top: 10rpx;
		align-items: center;
	}

	.c-text {
		max-width: 50%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		display: block;
	}

	.pickBox {
		position: absolute;
		float: right;
		right: 0;
		width: 80%;
		display: flex;
		text-align: right;
		justify-content: flex-end;
	}

	.payBox {
		position: fixed;
		bottom: 1vh;
		z-index: 999;
	}

	.g-active-name {

		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		display: block;
	}

	.g-name view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.icon-img {
		width: 50%;
		height: 80%;

	}

	/**** addressList *****/
	.addr-address-list {
		width: 90%;
		margin-left: 5%;
	}

	.addr-address-box {
		margin-top: 15upx;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 3% 0 3%;
		min-height: 120upx;
		align-items: center;
		background-color: #FFFFFF;
		border-bottom: solid 1rpx #EEEEEE;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
	}

	.addr-address-item {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 3% 0;
		height: 120upx;
		background-color: #FFFFFF;
		border-bottom: solid 1rpx #EEEEEE;
	}

	.addr-address-item1 {
		width: 85%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		/* 	white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; */
	}

	.addr-address-item2 {
		width: 10%;
		height: 100%;
	}

	.addr-address-item .consignee {
		font-size: 24rpx;
		color: #333333;
	}

	.addr-address-item .mobile {
		margin-left: 15rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.addr-address-item .default {
		color: #000000;
		font-size: 20rpx;
		font-weight: bold;
		margin-left: 15rpx;
	}

	.addr-address-item1 view {
		width: 100%;
		height: 40%;
		display: flex;
		align-items: center;
		line-height: 1.5;
	}

	.addr-address-item:last-of-type {
		border: none;
	}

	.addr-add-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		background: #1270e0;
	}

	.os-address .address {
		margin-left: 10rpx;
		display: flex;
		justify-content: space-between;
		width: 90%;
		align-items: center;
	}

	.os-address .address view {
		line-height: 1.2;
	}

	.os-address .forward,
	.os-time .forward {
		margin-left: auto;
	}

	.os-address .address .consignee {
		color: #666666;
	}

	.os-add-addr-btn {
		background-color: #1270E0;
		color: #FFFFFF;
		border-radius: 20rpx;
		text-align: center;
		padding: 3%;
		width: 80%;
		margin: 0 auto;
	}

	.pick-item1 {
		margin-left: 15upx;
	}
	.dizhi-info{
		display: flex;
		flex-wrap: wrap;
	}
</style>
